import React from "react";
import { View } from "react-native";

import styles from "./styles";

const PageMark = ({ count = 1, active = 0, style = {}, type = "base" }) => {
  const marks = [];

  for (let i = 0; i <= count; i += 1) {
    let markStyle = {};
    if (type === "base") {
      markStyle = styles.item;
      if (i === active) {
        markStyle = {
          ...styles.item,
          ...styles.itemActive,
        };
      }
    } else if (type === "mini") {
      markStyle = styles.itemMini;
      if (i === active) {
        markStyle = {
          ...styles.itemMini,
          ...styles.itemActive,
        };
      }
    }
    marks.push(<View key={i} style={markStyle} />);
  }
  return <View style={{ ...styles.root, ...style }}>{marks}</View>;
};

export default PageMark;
